<template>
  <div>
    <router-view></router-view>
    <div v-show="$route.meta.showfater">
      <banner></banner>
      <div class="popular-recommendations">热门歌单推荐</div>
      <div class="singerList">
        <router-link :to="{ path: '/index/pzww' }">
          <div class="singersinfo">
            <div class="left">
              <img
                src="http://qpic.y.qq.com/music_cover/NdzibUgT17lZoDhtI4ozl86fWZOuXuCfP7iaduiauuv9kxiciayXicoXp1icQ/300?n=1"
                alt=""
              />
            </div>
            <div class="right">
              <p>平泽唯唯</p>
              <span>纯音乐 ☁ 超治愈 ☁ 适合学习哦</span>
            </div>
          </div>
        </router-link>
        <router-link :to="{ path: '/index/honeysea' }">
          <div class="singersinfo">
            <div class="left">
              <img
                src="http://qpic.y.qq.com/music_cover/kGLjZpdYBzic5qRiclmCYnIqA1cicEhE2iaiaVQ2VsrNfkDL3VTlF41vQeicJo3TORyjEP/300?n=1"
                alt=""
              />
            </div>
            <div class="right">
              <p>honeysea😀</p>
              <span>【独家欧美】 晚风踩着云朵贩卖爱</span>
            </div>
          </div>
        </router-link>
        <router-link :to="{ path: '/index/orze' }">
          <div class="singersinfo">
            <div class="left">
              <img
                src="http://qpic.y.qq.com/music_cover/H4L7icoRhSgTiaJ9e6rNiaM8UDZPUUVp2YNicNcGwXfIBevr2FUPTEia5Tg/300?n=1"
                alt=""
              />
            </div>
            <div class="right">
              <p>零三</p>
              <span>"三杰"时光荏苒,追寻逝去流年</span>
            </div>
          </div>
        </router-link>
        <router-link :to="{ path: '/index/pzww' }">
          <div class="singersinfo">
            <div class="left">
              <img
                src="http://qpic.y.qq.com/music_cover/sCdyUKgxMOFRx0cRlichSyiblJsoZwNMjfXbCsSHFN5VzMaPKfiaVvKLw/300?n=1"
                alt=""
              />
            </div>
            <div class="right">
              <p>冷山集</p>
              <span>Trap Rap | 懒惰毒性的慵懒说唱</span>
            </div>
          </div>
        </router-link>
        <router-link :to="{ path: '/index/honeysea' }">
          <div class="singersinfo">
            <div class="left">
              <img
                src="http://qpic.y.qq.com/music_cover/EXVh00J0l1orGx5nKZymFUySLctkBibpFtNX47YA5Hxo07icA9KtVvPQ/300?n=1"
                alt=""
              />
            </div>
            <div class="right">
              <p>王亚鹏</p>
              <span>中文MC感情麦: 喊出人生道理</span>
            </div>
          </div>
        </router-link>

        <div class="singersinfo">
          <div class="left">
            <img
              src="http://qpic.y.qq.com/music_cover/Cz8Z9ECDQia3gE2YticLiaJ22KNOu00Czu4RYkZmia3kAhUCYhiaPZ6qXQg/300?n=1"
              alt=""
            />
          </div>
          <div class="right">
            <p>陈哲</p>
            <span>学霸必备:专心写作业,享受轻音乐好时光~</span>
          </div>
        </div>
        <div class="singersinfo">
          <div class="left">
            <img
              src="http://qpic.y.qq.com/music_cover/kGLjZpdYBzic5qRiclmCYnIqA1cicEhE2iaiaVQ2VsrNfkDL3VTlF41vQeicJo3TORyjEP/300?n=1"
              alt=""
            />
          </div>
          <div class="right">
            <p>honeysea😀</p>
            <span>【独家欧美】 晚风踩着云朵贩卖爱</span>
          </div>
        </div>
        <div class="singersinfo">
          <div class="left">
            <img
              src="http://qpic.y.qq.com/music_cover/H4L7icoRhSgTiaJ9e6rNiaM8UDZPUUVp2YNicNcGwXfIBevr2FUPTEia5Tg/300?n=1"
              alt=""
            />
          </div>
          <div class="right">
            <p>零三</p>
            <span>"三杰"时光荏苒,追寻逝去流年</span>
          </div>
        </div>
        <div class="singersinfo">
          <div class="left">
            <img
              src="http://qpic.y.qq.com/music_cover/sCdyUKgxMOFRx0cRlichSyiblJsoZwNMjfXbCsSHFN5VzMaPKfiaVvKLw/300?n=1"
              alt=""
            />
          </div>
          <div class="right">
            <p>冷山集</p>
            <span>Trap Rap | 懒惰毒性的慵懒说唱</span>
          </div>
        </div>
        <div class="singersinfo">
          <div class="left">
            <img
              src="http://qpic.y.qq.com/music_cover/EXVh00J0l1orGx5nKZymFUySLctkBibpFtNX47YA5Hxo07icA9KtVvPQ/300?n=1"
              alt=""
            />
          </div>
          <div class="right">
            <p>王亚鹏</p>
            <span>中文MC感情麦: 喊出人生道理</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import banner from "../swiper/banner.vue";

export default {
  components: { banner },
};
</script>

<style>
.popular-recommendations {
  background: #222222;
  color: gold;
  text-align: center;
  height: 6vh;
  line-height: 6vh;
}
.singerList {
  background: #222222;
  overflow: hidden;
}
.singersinfo {
  display: flex;
  width: 90vw;
  height: 20vw;
  margin-left: 5vw;
  margin-top: 5vw;
}
.singersinfo .left {
  width: 25%;
}
.singersinfo .left img {
  width: 100%;
  height: 100%;
}
.singersinfo .right {
  flex: 1;
  margin-left: 5vw;
  font-size: 14px;
  color: gray;
}
.singersinfo .right p {
  font-size: 16px;
  color: aliceblue;
  font-weight: bolder;
  margin-bottom: 3vw;
}
</style>
